<!--@Knockout-->
<div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
    dataSource: {
        store: {
            data: booksArray,
            type: 'array',
            key: 'bookID'
        }
    },
    columns: [
        'author',
        { dataField: 'title', width: 220 },
        { dataField: 'year', width: 50 },
        'genre', 'format'
    ],
    selectedRowKeys: [1, 5, 8],
    selection: { mode: 'multiple' }
}"></div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController">
    <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
        dataSource: {
            store: {
                data: booksArray,
                type: 'array',
                key: 'bookID'
            }
        },
        columns: [
            'author',
            { dataField: 'title', width: 220 },
            { dataField: 'year', width: 50 },
            'genre', 'format'
        ],
        selectedRowKeys: [1, 5, 8],
        selection: { mode: 'multiple' }
    }"></div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
<!--/@jQuery-->